require('./PageIntegration.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const {List,Scroller,NavBar,SearchBar,Toast, Button,Avatar,Context,Boxs,Grid,Icon,SwitchField,Group,Tab,Calendar,DatetimeField} = SaltUI;
const png = require('../../images/11.jpg');
const selectPng = require('../../images/22.png');
const timeStart = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+1;
const timeToday = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+new Date().getDate();
const timeSpace = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+(new Date().getDate()-15);
let HBox = Boxs.HBox;
let Box = Boxs.Box;
class Integration extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loaded:false,
            content:{},
            error:false,
            date:new Date(),
            show:false,
            locale:'zh-cn',
            selected:false,//搜索异常按钮图片
            searchStartTime:timeSpace,
            searchEndTime:timeToday,
            value: null,
            className: '',
            title: '积分系统',
            isShow: false,
            rightText:' ',
            active:0
        };
    }

   getTimeInterval(){
  
        return (this.state.date.getDate()==1)?('('+timeStart+')'):'('+(timeStart+'-'+timeToday)+')';
    }
    getMonthLen(year,month){
        let nextMonth = new Date(year,month+1,1); //获取下个月的第一天
        nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数
        return nextMonth.getDate(); //返回当天日期
    }
    tick() {
        this.setState({
            date: new Date()
        });
    }
//日期按钮点击
    handleClickDate(){

        console.log('日期被点击了');
        let t = this;
        t.setState({
            show: true
        });
    }
    onCloseCalendar() {
        let t = this;
        t.setState({
            show: false
        });
    }
    handleCalendarData(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
       console.log(JSON.stringify(values));
       let date1 = values.endDate;
       let date = new Date(date1);
       let month = date.getMonth()+1;
       let day = date.getDate();
       let year =date.getFullYear();
       console.log(month+'-'+year );
       let endTime = year+'-'+month+'-'+day;
       date1 = values.startDate;
       date = new Date(date1);
       month = date.getMonth()+1;
       day = date.getDate();
       year =date.getFullYear();
       let startTime = year+'-'+month+'-'+day;
        let t = this;
        t.setState({
            show: false,
            searchEndTime:endTime,
            searchStartTime:startTime
        });
    }
    handleClickImg(){
        let t = this;
        t.setState({
            selected:!t.state.selected
        });
    }
    handleClickSearch(){
        console.log('搜索内容'+this.state.searchStartTime+','+this.state.searchEndTime);
    }
    handleClick(workNo) {
        Toast.show({
            type: 'loading',
            content: 'Loading'
        });
        //Action触发时，需要指定actionName
        Actions.fetchData({
            workNo: workNo
        }, function(data) {
            // Toast.hide();
            // console.log(JSON.stringify(data));
        });
    }
    //显示为日常班还是公休
    getDay(date){
          let week=''; 
          let DateObject =new Date(date.replace(/-/g, "/"));
          if(DateObject.getDay()==0||6) week="公休"
          if(DateObject.getDay()==1||2||3||4||5) week="日常班"
          return week;
      }
     //获取小时时间 
    getTime(values){
          let D = new Date(values);
          let h = D.getHours();
          let i = D.getMinutes();
          let s = D.getSeconds();
          let  startTime = h+':'+i+':'+s;
          return startTime;
      }
      //获取日期格式
    getDate(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
          let date = new Date(values);
          let month = date.getMonth()+1;
          let day = date.getDate();
          let year =date.getFullYear();
          let startDate= year+'-'+month+'-'+day;
          return startDate;
    }
 handleChange() {

    }
    handleOnLeftClick(){
        self.location.hash='home';
    }

   
    render() {
        let t =this;
        return (
            
            //必须需要只有一个顶部标签
            <div>             
                <div className="t-FAC t-PT10 marginSpace">
                     本月小结
                    <div className="t-FAC t-PT10">{t.getTimeInterval()}</div>
                </div> 
                <div className="t-PT10">
                    <HBox >
                        <Box flex={1} className="button-border t-FAC" >
                            <span >本月积分xxx分</span>
                        </Box>
                        <Box  flex={1} className="button-border t-FAC">
                            <span>本月积分xx名</span>
                        </Box>                       
                    </HBox>
                    <HBox>
                        <Box flex={1} className="button-border t-FAC">
                            <div>本月积分绩效xxxx元</div>
                        </Box>
                        <Box flex={1} className="button-border t-FAC">
                            <span>年度累计积分xxx分</span>
                        </Box>
                    </HBox>
                </div>
                <div className="" >
                     <div className="t-FS16 t-MT10 t-FAC">自助查询</div>
                     <Tab className="T-LH30" onChange={t.handleChange.bind(t)} >
                         <Tab.Item title="月度积分绩效明细" >
                             <div className="t-MT6">
                                 <span className='search '>年份<img className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>
                                 <span className='search '>月份<img  className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>
                                 <span className='search'>姓名选框</span>
                                 <span className='search-button t-ML30' onClick={t.handleClickSearch.bind(t)}>搜索</span>
                              </div>
                   
                         </Tab.Item>
                         <Tab.Item title="月度积分绩效排行">
                             <div className="t-MT6">
                                 <span className='search '>年份<img className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>
                                 <span className='search t-ML4'>月份<img  className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>
                                 <span className='search-button t-ML10' onClick={t.handleClickSearch.bind(t)}>搜索</span>
                              </div>
                         </Tab.Item>
                         <Tab.Item title="累计积分绩效排行">
                              <div className="t-MT6">
                                 <span className='search t-ML10'>开始日期<img className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>
                                 <img src={t.state.selected?selectPng:png} width={16} onClick={t.handleClickImg.bind(t)}/><span className='t-ML6'>仅搜索异常</span>
                                 <span className='search-button t-ML10' onClick={t.handleClickSearch.bind(t)}>搜索</span>
                              </div>                  
                         </Tab.Item>
                      </Tab>

                </div>
            </div>
           );
    }


    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}
reactMixin.onClass(Integration, Reflux.connect(Store));

module.exports = Integration;
